<template lang="pug">
//- div(style='padding: 40px 80px 40px 40px')
//- Row(type='flex')
//-   Col(span=12)
Form(:model='formData', :label-width=80)
  FormItem(label='封面')
    CoverUploader(@on-upload='onCoverUpload')
  FormItem(label='标题', required)
    Input(v-model='formData.title')
  FormItem(label='链接地址', required)
    Input(v-model='formData.link', type='link')
  FormItem.text-left
    Button(type='primary', @click='draft', :loading='loading1') 保存为草稿
    | &nbsp;&nbsp;
    Button(type='success', @click='publish', :loading='loading2') 发布
</template>

<script>
import CoverUploader from '@/components/CoverUploader'
// import Editor from '@/components/Editor'

import Api from '@/apis/slideshow'
import store from '@/store'

export default {
  components: {
    CoverUploader
  },
  data () {
    return {
      loading1: false,
      loading2: false,
      picture: '//placehold.it/600x400?text=+',
      formData: {
        picture: null,
        title: '',
        link: '',
        group_id: store.state.app.id,
        published: true
      }
    }
  },
  methods: {
    validate () {
      return this.formData.title.trim() && this.formData.link
    },
    draft () {
      this.formData.published = false
      this.loading1 = true
      this.submit()
    },
    publish () {
      this.formData.published = true
      this.loading2 = true
      this.submit()
    },
    submit () {
      if (this.validate()) {
        // this.loading = true
        Api.postSlideshow(this.formData).then(() => {
          this.loading1 = false
          this.loading2 = false
          this.$router.push('/slideshows')
        })
      } else {
        this.loading1 = false
        this.loading2 = false
        this.$Message.error('请填写所需字段')
      }
    },
    handleUpload (file) {
      return false
    },
    onCoverUpload (file) {
      this.formData.picture = file.id
    },
    setCategory (e) {
      this.formData.category = {
        id: e.value,
        name: e.label
      }
    }
  }
}
</script>

<style lang="less">
.article-cover-uploader {

  .ivu-upload-select {
    width: 100%;
    // padding-bottom: 66.7%;
    // height: 0;
  }

  .uploader {
    width: 100%;
    // height: 0;
    padding: 20px 40px;
    // padding-bottom: 66.7%;
    border: 1px dotted #999;
    text-align: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

}

.article-preview {
  // margin: 0 10px;
  padding: 10px;
  // height: 100%;
  width: 375px;
  height: 667px;
  overflow-y: scroll;
  border: 5px solid #eee;
}
</style>
